<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>子组件向父组件通信</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px">
    num={{num}}
    <br/>
    <br/>
    <!-- 使用组件 -->
    <!-- plus、reduce 与组件定义时$emit后面的值保持一致。-->
    <!-- numPlus、numReduce 对应父组件中的方法名称-->
    <counter1 @plus="numPlus" @reduce="numReduce"></counter1>
</div>
</body>

<script type="text/javascript">
    // 定义组件
    const counter1 = {
        template: `<div style="font-size: 22px">
                        <button @click="incrNum">+</button>&nbsp;&nbsp;
                        <button @click="decrNum">-</button>&nbsp;&nbsp;
                   </div>`,
        // 定义接收父组件的属性，然后在使用组件时传递
        props: ["snum"],
        methods: {
            // 递增
            incrNum() {
                return this.$emit("plus");
            },
            // 递减
            decrNum() {
                return this.$emit("reduce");
            }
        }
    };

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        data() {
            return {
                num: 0
            }
        },
        methods: {
            numPlus() {
                this.num++;
            },
            numReduce() {
                if (this.num >= 1) {
                    this.num--;
                }
            }
        }
    });

    // 全局注册组件：在所有 Vue 实例中都可以使用.
    App.component("counter1", counter1);

    // 一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    const rootViewModel = App.mount("#rootApp");

</script>
</html>
